<template>
  <div class="utilization-map-test">
    <h2>利用率分布图测试</h2>
    <div class="map-controls">
      <el-button @click="initMap" type="primary">初始化地图</el-button>
      <el-button @click="updateData" type="success">更新数据</el-button>
    </div>
    <div ref="mapContainer" class="map-container"></div>
    <div class="map-info">
      <p>地图状态: {{ mapStatus }}</p>
      <div class="region-list">
        <h4>区域利用率数据:</h4>
        <div v-for="(data, region) in regionData" :key="region" class="region-item">
          <span class="region-name">{{ region }}:</span>
          <span class="region-utilization" :style="{ color: data.color }">{{ data.utilization }}%</span>
          <span class="region-count">({{ data.warehouseCount }}个库房)</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'UtilizationMapTest',
  data() {
    return {
      mapInstance: null,
      mapStatus: '未初始化',
      regionData: {
        '北京': { utilization: 76, color: '#e6a23c', warehouseCount: 2 },
        '上海': { utilization: 85, color: '#e6a23c', warehouseCount: 3 },
        '广东': { utilization: 90, color: '#f56c6c', warehouseCount: 6 },
        '江苏': { utilization: 82, color: '#e6a23c', warehouseCount: 4 },
        '浙江': { utilization: 73, color: '#e6a23c', warehouseCount: 3 },
        '四川': { utilization: 68, color: '#67c23a', warehouseCount: 4 },
        '山东': { utilization: 75, color: '#e6a23c', warehouseCount: 3 },
        '河北': { utilization: 69, color: '#67c23a', warehouseCount: 2 },
        '湖北': { utilization: 79, color: '#e6a23c', warehouseCount: 4 },
        '辽宁': { utilization: 65, color: '#67c23a', warehouseCount: 3 }
      }
    }
  },

  mounted() {
    this.registerChinaMap()
  },

  beforeUnmount() {
    if (this.mapInstance) {
      this.mapInstance.dispose()
    }
  },

  methods: {
    // 注册中国地图数据
    registerChinaMap() {
      const chinaMapData = {
        type: 'FeatureCollection',
        features: [
          {
            type: 'Feature',
            properties: { name: '北京' },
            geometry: {
              type: 'Polygon',
              coordinates: [[[116.0, 39.5], [117.0, 39.5], [117.0, 40.5], [116.0, 40.5], [116.0, 39.5]]]
            }
          },
          {
            type: 'Feature',
            properties: { name: '上海' },
            geometry: {
              type: 'Polygon',
              coordinates: [[[121.0, 31.0], [122.0, 31.0], [122.0, 32.0], [121.0, 32.0], [121.0, 31.0]]]
            }
          },
          {
            type: 'Feature',
            properties: { name: '广东' },
            geometry: {
              type: 'Polygon',
              coordinates: [[[113.0, 22.0], [117.0, 22.0], [117.0, 25.0], [113.0, 25.0], [113.0, 22.0]]]
            }
          },
          {
            type: 'Feature',
            properties: { name: '江苏' },
            geometry: {
              type: 'Polygon',
              coordinates: [[[118.0, 31.0], [122.0, 31.0], [122.0, 35.0], [118.0, 35.0], [118.0, 31.0]]]
            }
          },
          {
            type: 'Feature',
            properties: { name: '浙江' },
            geometry: {
              type: 'Polygon',
              coordinates: [[[118.0, 27.0], [123.0, 27.0], [123.0, 31.0], [118.0, 31.0], [118.0, 27.0]]]
            }
          },
          {
            type: 'Feature',
            properties: { name: '四川' },
            geometry: {
              type: 'Polygon',
              coordinates: [[[97.0, 26.0], [108.0, 26.0], [108.0, 34.0], [97.0, 34.0], [97.0, 26.0]]]
            }
          },
          {
            type: 'Feature',
            properties: { name: '山东' },
            geometry: {
              type: 'Polygon',
              coordinates: [[[114.0, 34.0], [123.0, 34.0], [123.0, 38.0], [114.0, 38.0], [114.0, 34.0]]]
            }
          },
          {
            type: 'Feature',
            properties: { name: '河北' },
            geometry: {
              type: 'Polygon',
              coordinates: [[[113.0, 36.0], [120.0, 36.0], [120.0, 43.0], [113.0, 43.0], [113.0, 36.0]]]
            }
          },
          {
            type: 'Feature',
            properties: { name: '湖北' },
            geometry: {
              type: 'Polygon',
              coordinates: [[[108.0, 29.0], [117.0, 29.0], [117.0, 34.0], [108.0, 34.0], [108.0, 29.0]]]
            }
          },
          {
            type: 'Feature',
            properties: { name: '辽宁' },
            geometry: {
              type: 'Polygon',
              coordinates: [[[118.0, 38.0], [126.0, 38.0], [126.0, 44.0], [118.0, 44.0], [118.0, 38.0]]]
            }
          }
        ]
      }
      
      echarts.registerMap('china', chinaMapData)
      this.mapStatus = '地图数据注册成功'
    },

    // 初始化地图
    initMap() {
      if (!this.$refs.mapContainer) {
        this.$message.error('地图容器未找到')
        return
      }

      try {
        this.mapInstance = echarts.init(this.$refs.mapContainer)
        this.updateData()
        this.mapStatus = '地图初始化成功'
        this.$message.success('地图初始化成功')
      } catch (error) {
        this.mapStatus = '地图初始化失败'
        console.error('地图初始化失败:', error)
        this.$message.error('地图初始化失败')
      }
    },

    // 更新数据
    updateData() {
      if (!this.mapInstance) {
        this.$message.error('请先初始化地图')
        return
      }

      const option = {
        tooltip: {
          trigger: 'item',
          backgroundColor: 'rgba(0, 0, 0, 0.8)',
          borderColor: '#ccc',
          borderWidth: 1,
          textStyle: {
            color: '#fff',
            fontSize: 12
          },
          formatter: (params) => {
            const regionData = this.regionData[params.name]
            if (regionData) {
              return `
                <div style="padding: 8px;">
                  <div style="font-weight: bold; margin-bottom: 6px; color: #409eff;">${params.name}省</div>
                  <div style="margin-bottom: 4px;">📊 平均利用率: ${regionData.utilization}%</div>
                  <div style="margin-bottom: 4px;">🏢 库房数量: ${regionData.warehouseCount}个</div>
                  <div style="color: ${regionData.color};">🔔 利用率等级: ${regionData.utilization >= 90 ? '高' : regionData.utilization >= 70 ? '中' : '低'}</div>
                </div>
              `
            }
            return `${params.name}<br/>暂无数据`
          }
        },
        visualMap: {
          min: 60,
          max: 95,
          left: 'left',
          top: 'bottom',
          text: ['高利用率', '低利用率'],
          textStyle: {
            fontSize: 12
          },
          inRange: {
            color: ['#67c23a', '#e6a23c', '#f56c6c']
          },
          calculable: true,
          orient: 'horizontal',
          itemWidth: 15,
          itemHeight: 120
        },
        series: [
          {
            name: '利用率分布',
            type: 'map',
            map: 'china',
            roam: true,
            itemStyle: {
              borderColor: '#e9ecef',
              borderWidth: 1
            },
            emphasis: {
              itemStyle: {
                borderColor: '#409eff',
                borderWidth: 2
              }
            },
            data: Object.keys(this.regionData).map(region => ({
              name: region,
              value: this.regionData[region].utilization,
              itemStyle: {
                areaColor: this.regionData[region].color
              }
            }))
          }
        ]
      }

      this.mapInstance.setOption(option)
      this.$message.success('数据更新成功')
    }
  }
}
</script>

<style lang="scss" scoped>
.utilization-map-test {
  padding: 20px;
  
  h2 {
    margin-bottom: 20px;
    color: #303133;
  }
  
  .map-controls {
    margin-bottom: 20px;
    
    .el-button {
      margin-right: 10px;
    }
  }
  
  .map-container {
    width: 100%;
    height: 400px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    margin-bottom: 20px;
  }
  
  .map-info {
    background: #f5f7fa;
    padding: 15px;
    border-radius: 4px;
    
    p {
      margin: 5px 0;
      color: #606266;
    }
    
    .region-list {
      margin-top: 15px;
      
      h4 {
        margin: 0 0 10px 0;
        color: #303133;
      }
      
      .region-item {
        display: flex;
        align-items: center;
        margin-bottom: 5px;
        
        .region-name {
          width: 60px;
          color: #606266;
        }
        
        .region-utilization {
          width: 50px;
          font-weight: bold;
        }
        
        .region-count {
          color: #909399;
          font-size: 12px;
        }
      }
    }
  }
}
</style>
